<template>
  <div class="cmt-container">
    <h3>发表评论</h3>
    <hr>
    <textarea placeholder="请输入要BB的内容(最多BB 120字)" maxlength="120" v-model="textarea"></textarea>
    <mt-button type="primary"  size="large" class="cmt-but" @click="cmtbut">发表评论</mt-button>
    <div class="cmt-item" v-for="(item,i) in newctm" :key="item.id">
        <div class="cmt-title">
            第{{i+1}}楼 用户：{{item.user_name}}  发表时间：{{item.add_time | dataFormat}}
        </div>

        <div class="cmt-body">
           {{item.content?item.content:"此用户很懒"}}
        </div>
    </div>
    <mt-button type="danger" plain  size="large" @click="getmove">加在更多</mt-button>
    
  </div>
</template>

<script>
import {Toast} from "mint-ui"
export default {

  data () {
    return {
        id:this.$route.params.id,
        newctm:[],
        textarea:"",
        pageindex:1
    }
  },
 created () {
      this.getnewcmt()
  },
  methods: {
        getnewcmt(){
            this.$http.get("api/getcomments/"+this.id+"?pageindex="+this.pageindex).then(res=>{
                if(res.body.status==0){
                    // this.newctm=res.body.message
                    this.newctm = this.newctm.concat(res.body.message)
                    console.log(this.newctm)
                }
            })
        },
        cmtbut(){
                console.log(this.textarea)
                this.$http.post("api/postcomment/"+this.id,{content:this.textarea},{emulateJSON:true}).then(res=>{
                    if(res.body.status==0){
                        this.newctm.unshift({
                            add_time:new Date,
                            user_name:'匿名',
                            content:this.textarea
                        })
                     
                        this.getnewcmt();
                    }
                })
        },
        getmove(){
                this.pageindex++;
                this.getnewcmt();

        }
  },

 
}
</script>

<style lang='less'>
    .cmt-container{
        padding-bottom: 100px;
        h3{
            font-size: 18px;
        }
        textarea{
            height: 85px;
            text-indent: 2em;
            font-size: 13px;
            margin: 0;
        }
        .cmt-item{
            font-size: 12px;
            margin-top: 5px;
        .cmt-title{
            background-color: #ccc;
            line-height: 30px;
           
        }
        .cmt-body{
            line-height: 40px;
            text-indent: 2em;
        }
        }
       
    }
</style>
